<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scaleable=no">
<title>移动端布局</title>
<style>
	/*css reset*/
	*{ margin:0; padding:0; }
	li{ list-style:none; }
	img{ border:none; vertical-align:top; }
	a{ text-decoration:none; }
	body{ font-family:Helveticca,STHeiti,Droid Sans Fallback; }
	/*header start*/
	#header{ height:44px; padding:7px 0 0 10px; 
		background:#fafafa url(qqHeaderBg.png) no-repeat 162px 0; 
		box-sizing:border-box; position:relative; }
	#logo{ width:119px; height:30px; background:url(qqLogo.png) no-repeat; }
	#logo a{ width:100%; height:100%; 
		display:block; text-indent:-9999px; }
	#menuBtn{ width:22px; height:16px; 
		background:url(qqHeaderMenuBtn.png) no-repeat; position:absolute; right:14px; top:14px; }
	#menuBtn a{ width:100%; height:100%; display:block; }
	/*nav start*/
	#nav{ height:40px; background:#3e86ce; border:2px #317ecb solid; }
	#nav ul{ padding:5px 0 0 0; }
	#nav li{ float:left; width:64px; height:30px; font-size:18px; 
		text-align:center; line-height:30px; }
	#nav li a{ color:white; }
	#nav .current{ background:#226fbb; }
	/*banner start*/
	#banner{ width:100%; position:relative; }
	#banner img{ width:100%; }
	#banner p{ position:absolute; bottom:5px; color:white; }
</style>
</head>
<body>
<div id="header">
	<div id="logo">
    	<a href="#">腾讯体育</a>
    </div>
    <div id="menuBtn">
    	<a href="#"></a>
    </div>
</div>
<div id="nav">
	<ul>
    	<li class="current"><a href="#">体育</a></li>
        <li><a href="#">NBA</a></li>
    </ul>
</div>
<div id="banner">
	<a href="#"><img src="qqBanner.jpg"></a>
    <p>丁宁时尚大片又帅又美</p>
</div>
</body>
</html>
